<template>
  <div class="orderFrom">
    <span class="h4">{{ selStatus }}</span>
    <span style="float:right;margin-top:-4px;">&emsp;<a-button class="font12" @click="handleReset">{{ $t('public.reset') }}</a-button></span>
    <span class="searItem">
      <a-icon slot="prefix" type="search" class="search-ico"/>
      <a-input-search placeholder="请输入姓名、电话、订单号" type="text" v-model="gjc" @search="onSearch" style="font-size:12px;">
        <a-button slot="enterButton" style="color:#1890FF;" class="font12">{{ $t('public.search') }}</a-button>
      </a-input-search>
    </span>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'OrderSearch',
  data () {
    return {
    }
  },
  computed: {
    selStatus () {
      const type = this.orderListMenu
      let text = ''
      switch (type) {
        case '1':
          text = this.$t('public.checkInToday')
          break
        case '2':
          text = this.$t('public.checkOutToday')
          break
        case '3':
          text = this.$t('public.allOrders')
          break
      }
      return text
    },
    ...mapGetters([
      'orderListMenu',
      'orderParams'
    ]),
    gjc: {
      get () {
        return this.orderParams.gjc
      },
      set (value) {
        const params = {}
        params.gjc = value
        this.setOrderParams(params)
      }
    }
  },

  methods: {
    ...mapMutations([
      'setOrderParams'
    ]),

    onSearch (v) {
      const params = {}
      params.page = 1
      this.setOrderParams(params)
      setTimeout(() => {
        this.$emit('search')
      }, 500)
    },
    handleReset () {
      const params = {}
      params.gjc = ''
      params.page = 1
      this.setOrderParams(params)
      setTimeout(() => {
        this.$emit('search')
      }, 500)
    }
  }
}
</script>
<style lang="less" scoped>
.orderFrom{
  padding:14px 16px ;
  .h4{color:#333333;font-size: 16px;}
  .search-ico{position: absolute;top:10px;left:18px;z-index:2;color:#999999}
  .searItem{
    width:284px;
    float:right;
    position: relative;
    margin-top:-4px;
  }
  /deep/ .ant-input-search.ant-input-search-enter-button > .ant-input{
    padding-left:36px;
  }
  /deep/.ant-input-affix-wrapper .ant-input{
    font-size:12px !important;
  }
}
</style>
